<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">移除数据</button>
    <button class="clear">清空数据</button>
    <script>
        /*
            将数据永久存储在本地，除非手动删除，否则关闭页面也会存在 
            只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。
            localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除。
            应注意，无论数据存储在 localStorage 还是 sessionStorage ，它们都特定于页面的协议。
            另外，localStorage 中的键值对总是以字符串的形式存储。 (需要注意，和 js 对象相比，键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型).
         */
        document.querySelector(".set").addEventListener("click", function () {
            //存储数据：localStorage.setItem(key,value)
            localStorage.setItem("name", "陶品奇")

        })

        document.querySelector(".get").addEventListener("click", function () {
            //获取数据：localStorage.getItem(key)
            const name = localStorage.getItem("name")
            console.log(name);

        })
        document.querySelector(".remove").addEventListener("click", function () {
            //移除数据：localStorage.removeItem(key)
            localStorage.removeItem("name")

        })

        document.querySelector(".clear").addEventListener("click", function () {
            //清空数据：  localStorage.clear()
            localStorage.clear()

        })
    </script>
</body>

</html>